<style>
  .page-header .left {
    width: calc(100% - 380px);
  }
</style>

<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['项目实施团队', '实施人员在岗时长统计']"
      icon="fa fa-wrench"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>实施人员在岗时长统计</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <div class="top_module">
                  <span class="module_text">所属厂区</span>
                  <sa-company-tree
                    companyTreeId="companyTreeFactory"
                    (companySelected)="companySelected($event)"
                  ></sa-company-tree>
                </div>
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">实施团队</span>
                  <sa-company-tree
                    companyTreeId="companyTree"
                    [inputApi]="teamApi"
                    [root]="isShowRoot"
                    [inputName]="'outsourcingTeamName'"
                    [companyNameValue]="searchParams.outsourcingTeamName"
                    [companyIdValue]="searchParams.outsourcingTeamId"
                    (companySelected)="companyTeamSelected($event)"
                  ></sa-company-tree>
                </div>
                <div class="top_module">
                  <span class="module_text">站点名称</span>
                  <div class="s_hover_box">
                    <select class="select2" id="repairPointSelect2">
                      <option value=""></option>
                    </select>
                    <div class="s_del_icon" (click)="delRepairPoint()">x</div>
                  </div>
                </div>
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">用户类型</span>
                  <select
                    name=""
                    class="top_module_select"
                    [(ngModel)]="searchParams.userType"
                    (change)="table_search()"
                  >
                    <option value="">全部</option>
                    <option *ngFor="let item of userTypeList" [value]="item.id">{{ item.text }}</option>
                  </select>
                </div>

                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">员工类型</span>
                  <select
                    name=""
                    class="top_module_select"
                    [(ngModel)]="searchParams.workerType"
                    (change)="table_search()"
                  >
                    <option value="">全部</option>
                    <option value="0">管理者</option>
                    <option value="1">正式员工</option>
                    <option value="2">兼职员工</option>
                    <option value="3">外包员工</option>
                  </select>
                </div>
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">在岗状态</span>
                  <select
                    name=""
                    class="top_module_select"
                    [(ngModel)]="searchParams.dutyType"
                    (change)="table_search()"
                  >
                    <option value="1">全部</option>
                    <option value="2">已在岗</option>
                    <option value="3">未在岗</option>
                    <option value="4">未上报</option>
                  </select>
                </div>
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">关联站点</span>
                  <select
                    name=""
                    class="top_module_select"
                    [(ngModel)]="searchParams.relationType"
                    (change)="table_search()"
                  >
                    <option value="1">全部</option>
                    <option value="2">已关联</option>
                    <option value="3">未关联</option>
                  </select>
                </div>

                <div class="selectDate top_module">
                  <table-select-date
                    [notInit]="true"
                    [specifyTime]="specifyTime"
                    (outerTime)="getSelectTableTime($event)"
                  ></table-select-date>
                </div>

                <button class="btn btn-primary" (click)="table_search()">查询</button>
                <button class="btn btn-primary" (click)="export()">导出</button>
              </div>
              <div class="right top-search">
                <input
                  type="text"
                  [(ngModel)]="searchKey"
                  (change)="table_search()"
                  class="search-input"
                  placeholder="关键字..."
                />
                <span class="top-search-box">
                  <button class="top-search-btn" type="button" (click)="table_search()">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>日期</th>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>实施团队</th>
                    <th>用户类型</th>
                    <th>所属角色</th>
                    <th>员工类型</th>
                    <th>电话号码</th>
                    <th>所属站点</th>
                    <th>上岗时间</th>
                    <th>离岗时间</th>
                    <th>在岗时长</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData">
                    <td>{{ row.statisticsDate.slice(0, 10) }}</td>
                    <td>{{ row.userName }}</td>
                    <td>{{ row.name }}</td>
                    <td>{{ row.outsourcingTeamName }}</td>
                    <td>{{ row.userTypeName }}</td>
                    <td>{{ row.roleName }}</td>
                    <td>
                      <span *ngIf="row.workerType == '0'">管理者</span>
                      <span *ngIf="row.workerType == '1'">正式员工</span>
                      <span *ngIf="row.workerType == '2'">兼职员工</span>
                      <span *ngIf="row.workerType == '3'">外包员工</span>
                    </td>
                    <td>{{ row.phone }}</td>
                    <td>{{ row.repairPointsStr }}</td>
                    <td>{{ row.workTime }}</td>
                    <td>{{ row.leaveTime }}</td>
                    <td>
                      <button type="button" (click)="viewRow(row, timeRecordsModal)">
                        {{ row.workHours }}
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCount"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <section
    bsModal
    #timeRecordsModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content" style="width: 1000px">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeViewModal(timeRecordsModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">采点统计</h4>
        </div>
        <form class="form-horizontal" role="form" novalidate="novalidate">
          <div class="modal-body">
            <button class="btn btn-primary" (click)="viewMapModal(mapModal)" style="margin-bottom: 10px;">查看采点地图</button>
            <div class="row form-horizontal table_scroll" style="max-height: 400px">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>采点时间</th>
                    <th>状态</th>
                    <th>经度</th>
                    <th>纬度</th>
                  </tr>
                </thead>
                <tbody class="carBody">
                  <tr *ngFor="let row of timeRecordsData; let i = index" [attr.data-index]="i">
                    <td>{{ i + 1 }}</td>
                    <td>{{ row.collectTime }}</td>
                    <td>
                      <span *ngIf="row.status == '0'" class="green">围栏内</span>
                      <span *ngIf="row.status == '1'" class="red">围栏外</span>
                    </td>
                    <td>{{ row.lng }}</td>
                    <td>{{ row.lat }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="recordTotalCount"
                [rows]="recordPageSize"
                [currentPage]="recordCurPage - 1"
                (onPageChange)="recordPaginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="recordRefresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>

  <!-- 采点地图 -->
  <section
    bsModal
    #mapModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content" style="width: 1000px">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeViewModal(mapModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">采点地图</h4>
        </div>
        <form class="form-horizontal" role="form" novalidate="novalidate">
          <div class="modal-body">
            <div class="row form-horizontal table_scroll" style="height: 600px">
              <div id="baiduMap" style="height: 100%;"></div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>
</div>
